<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">联系人详情</div>
    </div>

    <div style="padding: 0.3rem;">
    	<div class="yy">
    		<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{detail.khmc}}</div>
    		<div class="flex">
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">跟进状态</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{item.gjzt}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
    				<div style="color: #666; margin-bottom: 0.2rem" >{{item.createtime}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">客户类型</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{item.khlx}}</div>
    			</div>

    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">联系电话</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{item.dh}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">最近一次拜访</div>
            <div style="color: #666; margin-bottom: 0.2rem">{{item.lasttime}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">客户状态</div>
            <div style="color: #259b24; margin-bottom: 0.2rem" v-if="item.spzt == 0">已审批</div>
            <div style="color: #1989fa; margin-bottom: 0.2rem " v-if="item.spzt == 1">待审批</div>
            <div style="color: #f00; margin-bottom: 0.2rem " v-if="item.spzt == 2">不通过</div>
    			</div>
    		</div>
    	</div>
    	<div class="flex" style="margin-bottom: 0.3rem;">
    		<div :class="act == 1?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">基本信息</div>
<!--    		<div :class="act == 2?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">联系人</div>
    		<div :class="act == 3?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">拜访记录</div> -->
    	</div>

    	<div v-if="act == 1">
    		<div style="margin-bottom: 0.3rem; font-size: 0.26rem;">基本信息</div>
    		<div style="font-size: 0.26rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">姓名</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.xm}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">性别</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.xb}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">部门</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.bm}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">财务</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.cw}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">生日</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.sr}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">电话</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.dh}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">微信</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.wx}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">QQ</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.qq}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">邮箱</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.yx}}</div>
    			</div>
          <div class="flexc" style="margin-bottom: 0.2rem;">
          	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">地址</div>
          	<div style="flex-grow: 1; color: #666;">{{detail.dz}}</div>
          </div>
          <div class="flexc" style="margin-bottom: 0.2rem;">
          	<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">备注</div>
          	<div style="flex-grow: 1; color: #666;">{{detail.bz}}</div>
          </div>
    		</div>

    		<div style="margin-bottom: 0.26rem; font-size: 0.28rem;">其他信息</div>
    		<div style="font-size: 0.26rem; margin-bottom: 0.5rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">创建人</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.fzr}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">创建时间</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.createtime}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">最近一次修改时间</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.lasttime}}</div>
    			</div>

    		</div>

    		<div class="flexcc">
    			<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="xiebanfang()">写拜访</van-button>

    			<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="go2('/lianxiren/xinjiankehu',detail.id)" v-if="person.title == '销售内勤'">编辑</van-button>
    			<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="shanchu()" v-if="person.title == '销售内勤'">删除</van-button>
    		</div>
    	</div>




    </div>

    <van-popup v-model="shanchulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;" >删除联系人</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选联系人删除？</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0 15px;" @click="shanchulog = false">取消</van-button>
    			<van-button type="info" size="small" style="padding: 0 15px;" @click="shanchugo()">确认</van-button>

    		</div>
    	</div>
    </van-popup>
  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
         act:1,
         tuihuilog:false,
         shanchulog:false,
         detail:"",

         tuihuiall:{
           khid:"",
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
         },

         item:"",
         shanchuall:{
           lxrid:"",
           fzrid:""
         },
         person:JSON.parse(localStorage.getItem('person'))
			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {
      go2:function(url,id){
        this.$router.push({
          path:url,
          query:{
            id:id,
            bianji:true
          }
        })
      },

      shanchugo:function(){
        axios.post('/Contact/deleteContact',this.shanchuall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已删除联系人');
            this.$router.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },


      shanchu:function(){
        this.shanchuall = {
           lxrid:this.detail.id,
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
         }
        this.shanchulog = true
      },

      xiebanfang:function(){
        this.$router.push({
          path:'/baifang/xinjiankehu',
          query:{
            baifang:true,
            khmc:this.item.khmc
          }
        })
      },

      go:function(){
        this.$router.push({
          path:'/kehu/xinjiankehu',
          query:{
            id:this.detail.id,
            bianji:true
          }
        })
      },
      tuihui:function(){
        this.tuihuiall = {
           khid:this.detail.id,
           fzrid:this.detail.fzrid
         }
        this.tuihuilog = true
      },
      tuihuigo:function(){
        axios.post('/Customer/updateBackCustomer',this.tuihuiall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已退回至公海客户');
            this.getlist()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      getlist:function(){
        axios.get('/Contact/queryContactDetail?lxrid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.detail = response.data.data

            axios.get('/Customer/queryCustomerDetail?khid='+response.data.data.khid).then((response2)=>{
            	if (response2.data.state == 200) {
                this.item = response2.data.data
            	} else {
                vant.Toast(response2.data.msg);
            	}
            })

        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      // @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
      sexConfirm:function(val){

      	this.sex.xuanzhong = val
      	console.log(this.sex.xuanzhong)
      	this.sex.log = false
      },
      sexCancel:function(val){
      	console.log(val)
      },
      sexChange:function(val){
      	console.log(val)
      }
    }
	}
</script>

<style scoped lang="less">

</style>
